02. Instructions

Project Rubric

Your project will be evaluated by a Udacity code reviewer according to the Build a Portfolio Site project rubric. Depending on your background knowledge of HTML and CSS, you may not need to complete all lessons to build this project. To evaluate what you'll need to know, start by downloading the mockup we've provided, and review the rubric. Be sure to follow the project rubric closely when designing your page.

Intro to HTML/CSS + Responsive Web Design

Before moving forward, make sure you are comfortable with the content from Intro to HTML and CSS and Responsive Web Design Fundamentals. For a quick self-assessment, ask yourself:

• What are the basic sections of a document?
• How can we represent metadata on a webpage?
• What is an HTML element?
  • What is an attribute of an HTML element? How is it used?
  • What does adding a class attribute to an HTML element do? How does this relate to CSS?
• What are some semantic HTML elements that you have learned? Pay special attention to the following:
  • <header>
  • <footer>
  • <section>
  • <article>
  • <nav>
  • <main>
• How are ordered lists made? What about unordered lists?
• How does an HTML file "know" which styles to apply? (i.e., how is a stylesheet linked to HTML?)
• How are CSS properties set to specific values?
• How does a media query help us conditionally apply CSS styles across different viewport sizes? Hint: Consider the @media CSS at-rule
  • How can you use operators like and, only, or not to create complex media queries?
• How are grid-based layouts created (e.g., with flexbox)?

Development Strategy (How Do I Complete this Project?)

All of the skills you'll need to help you build this can be found in the lessons in this part of your Nanodegree program. After reviewing the rubric at the top of this page, feel free to begin the workflow:

1. Download and review the design mockup (also at the very bottom of this page under Supporting Materials).

• There is no starter code provided for this project! Recall the Animal Trading Cards exercise earlier in this program. Think about how you had customized that page to look the way you wanted it to -- how you recreated that layout with your own code and style
• Note that ultimately, the colors and overall design in the mockup are just general guidelines! As long as you fulfill the rubric items noted above, you will find success with this project. You are not required to replicate the mockup entirely; however, in the past, students have found it very helpful to begin building the site to look as close to the provided mockup (before customizing). Remember: in the end, this is your portfolio to showcase!

1. Identify the various boxes you will need to build in order to recreate this design.

• What individual blocks/boxes make up the mockup? That is, what are the unique "sections" that make up this page? For example, it looks like there's header at the very top of the page. What other major sections can you find in the mockup? There are at least two more!
• Are any of these larger individual blocks comprised of "child" blocks? For example, the header looks like it consists of two child blocks: one small block for the logo, and one small block for the title

1. Open up your favorite code editor and write your HTML and CSS files. Continue to iterate until your work is representative of the design mockup.

• Recall the required elements from the rubric: at least four (4) images, a title text (feel free to use an <h1> or <h2> tag), paragraph texts, and a logo
• Think about the semantic HTML elements that you have learned, such as <header>, <footer>, <section>, <article>, <nav>, and <main>. How can you incorporate these elements into your portfolio page? How can they be used to break up the individual blocks you just identified?
• Make sure that all displayed content is readable/legible, and do not overlap other content or overflow the viewport
• Horizontal scrolling should not be necessary to view content. Vertical scrolling to view content is allowed
• You are welcome to use Flexbox, CSS Grid, or Bootstrap to build your grid-based layout

1. Implement responsive design to your page.

• Your portfolio site should be optimized across different viewport sizes
• Recall what you've learned about media queries in Responsive Web Design Fundamentals
• How can you make your images responsive? For a more in-depth look, check out our (optional) course on Responsive Images

1. Personalize your portfolio with custom colors, additional content, and your own images. As we mentioned earlier -- this is your portfolio to showcase! In the past, students have frequently implemented additional features such as:

• An "About Me" section
• Contact details
• Social media links
• A navigation bar

Styling Tips

• Stylesheet(s) should be linked to HTML
• There should be no style attributes present within the body of the HTML document
• Likewise, there should be no <style> elements in document (i.e., your .html file)
• It is perfectly acceptable to include HTML attributes for height and width of <img> elements

Code Validation

Before submitting your project, check your HTML and CSS against W3C's Validators. Note that the validators consider the following as errors -- whereas Udacity regards these errors as acceptable:

HTML5:

Bad value X-UA-Compatible for attribute http-equiv on element meta when using the X-UA-Compatible meta tag

CSS3:

Property [some property here] is an unknown vendor extension when using vendor prefixed properties (e.g., -moz-box-sizing)

Additional Resources

Here are some tools and articles you may find useful when developing your portfolio site:

• Udacity HTML/CSS Style Guide
• HTML Validator
• CSS Validator
• Responsive Images via Interneting is Hard
• A Complete Guide to Flexbox via CSS Tricks
• Flexbox Froggy

Still Not Sure How to Begin?

Feel free to check out this post in Knowledge for additional resources curated by fellow students. Beyond that, you are welcome to check out a webinar discussing the Build a Portfolio Site project below!

A note on plagiarism: Viewing someone else’s code to get a general idea of implementation, then putting it away and starting to write your own code from scratch is okay. Please do not copy someone's code, in whole or in part. For further details, check out this guide regarding plagiarism.